<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>渐变--径向渐变</title>
		<style type="text/css">
			svg {
				stroke: black;
				fill: none;
				width: 400px;
				height: 200px;
				border: 1px dashed black;
			}
		</style>
	</head>

	<body>
		<h4>三色径向渐变</h4>
		<svg>
			<defs>
				<radialgradient id="one">
					<stop offset="0%" style="stop-color: #f96;" />
					<stop offset="50%" style="stop-color: #9c9;" />
					<stop offset="100%" style="stop-color: #906;" />
				</radialgradient>
			</defs>
			<rect x="20" y="20" width="100" height="100" style="fill:url(#one);stroke: black;" />
		</svg>

		<h4>为径向渐变设置范围</h4>
		<svg>
			<defs>
				<radialgradient id="two" cx="0%" cy="0%" r="141%">
					<stop offset="0%" style="stop-color: #f96;" />
					<stop offset="50%" style="stop-color: #9c9;" />
					<stop offset="100%" style="stop-color: #906;" />
				</radialgradient>
			</defs>
			<rect x="20" y="20" width="100" height="100" style="fill:url(#two);stroke: black;" />
		</svg>

		<h4>设置径向渐变的焦点</h4>
		<svg>
			<defs>
				<radialgradient id="three" cx="0%" cy="0%" fx="50%" fy="50%" r="100%">
					<stop offset="0%" style="stop-color: #f96;" />
					<stop offset="50%" style="stop-color: #9c9;" />
					<stop offset="100%" style="stop-color: #906;" />
				</radialgradient>
			</defs>
			<rect x="20" y="20" width="100" height="100" style="fill:url(#three);stroke: black;" />
		</svg>

		<h4>径向渐变的spreadMethod属性</h4>
		<!--<svg>
			<defs>"
				<radialgradient id="four" cx="0%" cy="0%" r="70">
					<stop offset="0%" style="stop-color: #f96;" />
					<stop offset="50%" style="stop-color: #9c9;" />
					<stop offset="100%" style="stop-color: #906;" />
				</radialgradient>

				<radialgradient id="p1" xlink:href="#four" spreadMethod="pad" />
				<radialgradient id="p2" xlink:href="#four" spreadMethod="repeat" />
				<radialgradient id="p3" xlink:href="#four" spreadMethod="reflect" />

			</defs>
			<rect x="20" y="20" width="100" height="100" style="fill: url(#p1);stroke: black;" />
			<rect x="130" y="20" width="100" height="100" style="fill: url(#p2);stroke: black;" />
			<rect x="240" y="20" width="100" height="100" style="fill: url(#p3);stroke: black;" />
		</svg>-->
		<h5>spreadMethod="pad"</h5>
		<svg width="150" height="150" viewBox="0 0 150 150">
			<radialGradient id="radial" cx="0%" cy="0%" r="70%" spreadMethod="pad">

				<stop offset="0%" style="stop-color: #f96;" />
				<stop offset="50%" style="stop-color: #9c9;" />
				<stop offset="100%" style="stop-color: #906;" />
			</radialGradient>

			<rect x="10" y="10" width="130" height="130" style="fill: url(#radial2); stroke: black;" />
		</svg>
		<h5>spreadMethod="repeat"</h5>
		<svg width="150" height="150" viewBox="0 0 150 150">
			<radialGradient id="radial2" cx="0%" cy="0%" r="70%" spreadMethod="repeat">

				<stop offset="0%" style="stop-color: #f96;" />
				<stop offset="50%" style="stop-color: #9c9;" />
				<stop offset="100%" style="stop-color: #906;" />
			</radialGradient>

			<rect x="10" y="10" width="130" height="130" style="fill: url(#radial); stroke: black;" />
		</svg>
		<h5>spreadMethod="reflect"</h5>
		<svg width="150" height="150" viewBox="0 0 150 150">
			<radialGradient id="radial3" cx="0%" cy="0%" r="70%" spreadMethod="reflect">

				<stop offset="0%" style="stop-color: #f96;" />
				<stop offset="50%" style="stop-color: #9c9;" />
				<stop offset="100%" style="stop-color: #906;" />
			</radialGradient>

			<rect x="10" y="10" width="130" height="130" style="fill: url(#radial3); stroke: black;" />
		</svg>
	</body>

</html>